<template>
  <!-- 对话框(添加 / 修改) -->
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="50%"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :inline="false"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-row class="group-name">基本信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="学院" prop="collegesId">
            <college-selector v-model="form.collegesId"></college-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系部" prop="departmentsId">
            <departments-selector
              v-model="form.departmentsId"
              :college-id="form.collegesId"
            ></departments-selector>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="专业" prop="professionsId">
            <professions-selector
              v-model="form.professionsId"
              :department-id="form.departmentsId"
            ></professions-selector>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="classesId">
            <classes-from-selector
              v-model="form.classesId"
              :profession-id="form.professionsId"
            ></classes-from-selector>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="年级" prop="yearGrade">
            <el-input
              v-model="form.yearGrade"
              placeholder="请输入年级"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学号" prop="studentNumber">
            <el-input v-model="form.studentNumber" placeholder="请输入学号" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="入学时间" prop="enrollmentTime">
            <el-date-picker
              clearable
              v-model="form.enrollmentTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择入学时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法号" prop="legalName">
            <el-input v-model="form.legalName" placeholder="请输入法号" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="注册状态" prop="registerStatus">
            <el-radio-group v-model="form.registerStatus">
              <el-radio
                :label="dict.value"
                v-for="dict in this.getDictDatas(
                  DICT_TYPE.STUDENT_REGISTER_STATUS
                )"
                :key="dict.id"
                >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学费缴纳" prop="tuitionFee">
            <el-select v-model="form.tuitionFee" placeholder="请选择学费缴纳">
              <el-option
                v-for="dict in this.getDictDatas(
                  DICT_TYPE.INFRA_BOOLEAN_STRING
                )"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="在籍状态" prop="recordStatus">
            <el-radio-group v-model="form.recordStatus">
              <el-radio
                :label="dict.value"
                v-for="dict in this.getDictDatas('student_record_status')"
                :key="dict.id"
                >{{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费学期" prop="tuitionFeeSemester">
            <el-input
              v-model="form.tuitionFeeSemester"
              placeholder="请输入缴费学期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费金额" prop="tuitionFeeMoney">
            <el-input
              type="number"
              v-model="form.tuitionFeeMoney"
              placeholder="请输入缴费金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="缴费方式" prop="tuitionFeeType">
            <el-select
              v-model="form.tuitionFeeType"
              placeholder="请选择缴费方式"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.STUDENT_PAY_WAY)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="缴费时间" prop="tuitionFeeMoney">
            <el-date-picker
              clearable
              v-model="form.tuitionFeeTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择缴费时间"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">人员信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="证件照片" prop="papersImage">
            <image-upload v-model="form.papersImage" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="studentName">
            <el-input v-model="form.studentName" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="性别" prop="studentSex">
            <el-select v-model="form.studentSex" placeholder="请选择性别">
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄" prop="studentAge">
            <el-input
              v-model="form.studentAge"
              placeholder="请输入年龄"
              type="number"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              clearable
              v-model="form.birthday"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择出生日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="民族" prop="nation">
            <el-input v-model="form.nation" placeholder="请输入民族" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="籍贯" prop="natively">
            <el-input v-model="form.natively" placeholder="请输入籍贯" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修行类型" prop="monastical">
            <el-select v-model="form.monastical" placeholder="请选择修行类型">
              <el-option
                v-for="dict in this.getDictDatas(
                  DICT_TYPE.STUDENT_MONASTICAL_TYPE
                )"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="婚姻状况" prop="maritalStatus">
            <el-select
              v-model="form.maritalStatus"
              placeholder="请选择婚姻状况"
            >
              <el-option
                v-for="dict in this.getDictDatas(DICT_TYPE.USER_MARITAL_STATUS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="文化程度" prop="education">
            <el-select v-model="form.education" placeholder="请选择文化程度">
              <el-option
                v-for="dict in this.getDictDatas('system_education')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">证件信息</el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="papersType">
            <el-select v-model="form.papersType" placeholder="请选择证件类型">
              <el-option
                v-for="dict in this.getDictDatas('user_papers_type')"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件号码" prop="identityCardNumber">
            <el-input
              v-model="form.identityCardNumber"
              placeholder="请输入身份证号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="证件正面照" prop="frontImage">
            <image-upload v-model="form.frontImage" :limit="1" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证件反面照" prop="reversesImage">
            <image-upload v-model="form.reversesImage" :limit="1" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="证件地址" prop="papersAddress">
            <el-input
              v-model="form.papersAddress"
              placeholder="请输入证件地址"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="居住地址" prop="dwellAddress">
            <el-input
              v-model="form.dwellAddress"
              placeholder="请输入居住地址"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="本人电话" prop="phone">
            <el-input
              type="tel"
              v-model="form.phone"
              placeholder="请输入本人电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="微信" prop="wechat">
            <el-input v-model="form.wechat" placeholder="请输入微信" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">紧急联系人信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急联系人关系" prop="instancyRelation">
            <el-input
              v-model="form.instancyRelation"
              placeholder="请输入紧急联系人关系"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系人" prop="instancyContacts">
            <el-input
              v-model="form.instancyContacts"
              placeholder="请输入紧急联系人"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="紧急联系人电话" prop="instancyContactsPhone">
            <el-input
              type="tel"
              v-model="form.instancyContactsPhone"
              placeholder="请输入紧急联系人电话"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备用电话" prop="standbyPhone">
            <el-input
              type="tel"
              v-model="form.standbyPhone"
              placeholder="请输入备用电话"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">出家信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="出家时间" prop="monachalTime">
            <el-date-picker
              clearable
              v-model="form.monachalTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择出家时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出家寺院" prop="monachalTemple">
            <el-input
              v-model="form.monachalTemple"
              placeholder="请输入出家寺院"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="剃度师尊讳" prop="gradientTeachersName">
            <el-input
              v-model="form.gradientTeachersName"
              placeholder="请输入剃度师尊讳"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="梯度师电话" prop="gradientTeachersPhone">
            <el-input
              type="tel"
              v-model="form.gradientTeachersPhone"
              placeholder="请输入梯度师电话"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="是否受具足戒" prop="footQuit1">
            <el-select v-model="form.footQuit" placeholder="请选择是否受具足戒">
              <el-option
                v-for="dict in this.getDictDatas(
                  DICT_TYPE.INFRA_BOOLEAN_NUMBER
                )"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="受戒日期" prop="receiveDisciplineTime">
            <el-date-picker
              clearable
              v-model="form.receiveDisciplineTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择受戒日期"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="受戒寺院" prop="receiveDisciplineTemple">
            <el-input
              v-model="form.receiveDisciplineTemple"
              placeholder="请输入受戒寺院"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="得戒和尚尊讳" prop="receiveDisciplineName">
            <el-input
              v-model="form.receiveDisciplineName"
              placeholder="请输入得戒和尚尊讳"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="group-name">毕业信息</el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="毕业时间" prop="graduateTime">
            <el-date-picker
              clearable
              v-model="form.graduateTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择毕业时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="毕业编号" prop="graduateNumber">
            <el-input
              v-model="form.graduateNumber"
              placeholder="请输入毕业编号"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="毕业结论" prop="graduateVerdict">
            <el-input
              v-model="form.graduateVerdict"
              placeholder="请输入毕业结论"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位编号" prop="degreeNumber">
            <el-input
              v-model="form.degreeNumber"
              placeholder="请输入学位编号"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  createStudentRoll,
  updateStudentRoll,
} from "@/api/collegebase/studentRoll";
import ImageUpload from "@/components/ImageUpload";
import common from "@/api/collegebase/common";
import CollegeSelector from "@/components/CollegeSelector";
import DepartmentsSelector from "@/components/DepartmentsSelector";
import ProfessionsSelector from "@/components/ProfessionsSelector";
import ClassesFromSelector from "@/components/ClassesFromSelector";
import { getProfessions } from "@/api/collegebase/professions";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";

export default {
  name: "StudentRollEdit",
  components: {
    ClassesFromSelector,
    ProfessionsSelector,
    DepartmentsSelector,
    CollegeSelector,
    ImageUpload,
  },
  data() {
    return {
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        collegesId: [
          { required: true, message: "学院不能为空", trigger: "blur" },
        ],
        departmentsId: [
          { required: true, message: "系部不能为空", trigger: "blur" },
        ],
        classesId: [
          { required: true, message: "班级不能为空", trigger: "blur" },
        ],
        studentName: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        legalName: [
          { required: true, message: "法号不能为空", trigger: "blur" },
        ],
        studentSex: [
          { required: true, message: "性别不能为空", trigger: "change" },
        ],
        professionsId: [
          { required: true, message: "专业不能为空", trigger: "blur" },
        ],
        // papersImage: [
        //   { required: true, message: "证件照片不能为空", trigger: "blur" },
        // ],
        maritalStatus: [
          { required: true, message: "婚姻状况不能为空", trigger: "change" },
        ],
        monastical: [
          { required: true, message: "修行类型不能为空", trigger: "change" },
        ],
        studentAge: [
          { required: true, message: "年龄不能为空", trigger: "blur" },
        ],
        nation: [{ required: true, message: "民族不能为空", trigger: "blur" }],
        phone: [
          { required: true, message: "本人电话不能为空", trigger: "blur" },
        ],
        // major: [{ required: true, message: "专业不能为空", trigger: "blur" }],
        footQuit: [
          { required: true, message: "是否受具足戒不能为空", trigger: "blur" },
        ],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],

        studentNumber: [{ required: true, message: "学号不能为空", trigger: "blur" }],
        papersType: [{ required: true, message: "证件类型不能为空", trigger: "change" }],
        identityCardNumber: [{ required: true, message: "身份证号码不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    console.log(getDictDatas('student_pay_way'))
    console.log(getDictDatas('tuition_fee_type'))
    console.log(getDictDatas('time_week_list'))
  },
  watch: {
    "form.classesId": {
      immediate: true,
      handler(newVal, oldVal) {
        this.form.classesId = newVal;
        if (newVal) {
          this.classesChange(newVal);
        }
      },
    },
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  methods: {
    //获取年纪
    async classesChange(id) {
      const departmentsList = await common.getClassesDetail(id);
      this.$set(this.form, "yearGrade", departmentsList.data.classesGrade);
    },

    /** 初始化编辑的数据**/
    initData(rowData) {
      this.reset();
      if (rowData && rowData.id) {
        this.form = rowData;
        this.form.datetimerange = [this.form.startTime, this.form.endTime];
      }
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("update:show", false);
      this.reset();
    },
    /** 表单重置 */
    reset() {
      this.form = {
        id: undefined,
        studentName: undefined,
        legalName: undefined,
        studentSex: undefined,
        papersImage: undefined,
        maritalStatus: undefined,
        monastical: undefined,
        studentAge: undefined,
        nation: undefined,
        identityCardNumber: undefined,
        instancyContacts: undefined,
        instancyContactsPhone: undefined,
        phone: undefined,
        health: undefined,
        major: undefined,
        footQuit: undefined,
        email: undefined,
        wechat: undefined,
        dwellAddress: undefined,
        education: undefined,
        receiveDisciplineTemple: undefined,
        receiveDisciplineTime: undefined,
        receiveDisciplineName: undefined,
        monachalTime: undefined,
        monachalTemple: undefined,
        gradientTeachersName: undefined,
        gradientTeachersPhone: undefined,
        papersAddress: undefined,
        serialNumber: undefined,
        college: undefined,
        studentNumber: undefined,
        department: undefined,
        classGrade: undefined,
        birthday: undefined,
        checkStatus: undefined,
        checkUser: undefined,
        checkTime: undefined,
        enrollmentTime: undefined,
        tuitionFee: undefined,
        yearGrade: undefined,
        registerStatus: undefined,
        recordStatus: undefined,
        frontImage: undefined,
        reversesImage: undefined,
        natively: undefined,
        papersType: undefined,
        standbyPhone: undefined,
        instancyRelation: undefined,
        graduateTime: undefined,
        graduateVerdict: undefined,
        graduateNumber: undefined,
        degreeNumber: undefined,
        departmentsId: undefined,
        checkRemark: undefined,
        collegesId: undefined,
        professionsId: undefined,
        classesId: undefined,
        orgId: undefined,
        remark: undefined,
        tuitionFeeSemester: undefined,
        tuitionFeeMoney: undefined,
        tuitionFeeTime: undefined,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updateStudentRoll(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.cancel();
            this.$emit("success");
          });
          return;
        }
        // 添加的提交
        createStudentRoll(this.form).then((response) => {
          this.$modal.msgSuccess("新增成功");
          this.cancel();
          this.$emit("success");
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.group-name {
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
</style>


